<template>
  <f7-page
    infinite
    :infinite-distance="50"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <div style="margin-top: 3rem"></div>
    <div class="searchbar searchbar-inline">
      <div class="searchbar-input-wrap searchbar_style" style="height: 35px">
        <input
          type="search"
          placeholder="手机号码/昵称"
          style="background-color: #e8e8ea"
        />
        <i class="searchbar-icon" style="font-size: 16px"></i>
        <span class="input-clear-button"></span>
      </div>
      <i style="color: #007aff; font-size: 20px">搜索</i>
    </div>

    <f7-list-index
      ref="indexlist"
      :init="false"
      list-el=".list.contacts-list"
    ></f7-list-index>
    <f7-list list contacts-list>
      <div class="list-group">
        <ul>
          <li @click="$f7router.navigate('/newfirends')">
            <div class="item-content">
              <div class="item-media">
                <img src="@/assets/image/群聊.jpg" width="44px" />
              </div>
              <div class="item-inner">新的朋友</div>
              <f7-badge color="red" v-show="myRequestInfos != undefined">{{
                myRequestInfos != undefined ? myRequestInfos.length : 0
              }}</f7-badge>
            </div>
          </li>
          <li @click="addfirend(2)">
            <div class="item-content">
              <div class="item-media">
                <img src="@/assets/image/群聊.jpg" width="44px" />
              </div>
              <div class="item-inner">群组</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="list-group" v-for="(item, index) in friendList" :key="index">
        <ul>
          <li class="list-group-title">
            <span>{{ item.key }}</span>
          </li>
          <li
            class="swipeout"
            v-for="item1 in item.data"
            :key="item1.id"
            @click="detailUser(item1)"
          >
            <div class="swipeout-content">
              <div class="item-content">
                <div class="item-media">
                  <img :src="item1.avatar" width="44px" />
                </div>
                <div class="item-inner">{{ item1.buddyName }}</div>
              </div>
            </div>
            <div class="swipeout-actions-right">
              <a
                href="#"
                data-confirm="确定删除吗"
                class="swipeout-delete"
                @click.stop="delUser(item1)"
                >删除</a
              >
            </div>
          </li>
        </ul>
      </div>
    </f7-list>
  </f7-page>
</template>
<script>
import store from "@/store/index.js";
import { mapState } from "vuex";
import { deleteBuddyInfo } from "@/api/IM/index.js";
export default {
  data() {
    return {
      allowInfinite: true,
      showPreloader: true,
      inputSearch: "",
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        requestId: store.state.user.userInfo.userId,
        userName: "",
      },
      userId: 0,
    };
  },
  computed: {
    ...mapState({
      user: (store) => store.user.userInfo,
      friendList: (state) => state.requestinfo.friendList,
      myRequestInfos: (state) => state.user.myRequestInfos,
    }),
  },
  mounted() {
    let obj = {
      queryParams: this.queryParams,
      isSearch: false,
    };
    store.dispatch("getUserList", obj);
    setTimeout(() => {
      this.$f7.listIndex.create({
        el: ".list-index",
        listEl: ".contacts-list",
        indexes: "auto",
        scrollList: true,
        label: true,
      });
    }, 500);
  },
  methods: {
    // 滚动事件
    loadMore() {
      const self = this;
      if (!self.allowInfinite) return;
      self.allowInfinite = false;

      setTimeout(() => {
        if (self.items.length >= 200) {
          self.showPreloader = false;
          return;
        }
        const itemsLength = self.items.length;
        for (let i = 1; i <= 20; i += 1) {
          self.items.push(itemsLength + i);
        }
        self.allowInfinite = true;
      }, 1000);
    },
    delUser(user) {
      this.userId = user.id;
      this.$f7.dialog.confirm(
        "是否删除用户",
        "提示",
        this.delFn,
        function () {}
      );
    },
    delFn() {
      deleteBuddyInfo(this.userId).then((res) => {
        if (res.code != 200) {
          return this.$f7.dialog.alert(res.msg, "提示");
        }

        this.$f7.swipeout.delete(this.$f7.swipeout.el);
      });
    },
    detailUser(user) {
      // console.log(this.$f7.swipeout.el);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchbar_style {
  display: inline-block;
  width: calc(99% - 50px) !important;
}
</style>